<template>
  <div class="footer flex flex-col flex-ac flex-jc">
    <div>
      <div class="customer">
        <a :href="'tel:'+webtel">客服热线:{{webtel}}</a>
        <!-- <a
          target="_blank"
          href="http://wpa.qq.com/msgrd?v=3&uin=723856191&site=在线客服&menu=yes"
        >客服QQ:723856191</a>-->
        <a
          target="_blank"
          :href="'http://wpa.qq.com/msgrd?v=3&uin='+webqq+'&site=在线客服&menu=yes'"
        >客服QQ:{{webqq}}</a>
        <a>版权信息:{{copyright}}</a>
      </div>
    </div>
    <div class="footer-img">
      <img v-lazy="page_footer_one" alt />
      <img v-lazy="page_footer_two" alt />
      <img v-lazy="page_footer_three" alt />
      <img v-lazy="page_footer_four" alt />
      <img v-lazy="page_footer_five" alt />
      <img v-lazy="page_footer_six" alt />
    </div>
  </div>
</template>
<script>
import page_footer_one from "@/assets/imgs/page_footer_one.png";
import page_footer_two from "@/assets/imgs/page_footer_two.png";
import page_footer_three from "@/assets/imgs/page_footer_three.png";
import page_footer_four from "@/assets/imgs/page_footer_four.png";
import page_footer_five from "@/assets/imgs/page_footer_five.png";
import page_footer_six from "@/assets/imgs/page_footer_six.png";
import { WEB_QQ, WEB_TEL, COPY_RIGHT } from "@/store/mutation-types";
export default {
  mounted() {
    this.webqq = this.$ls.get(WEB_QQ);
    this.webtel = this.$ls.get(WEB_TEL);
    this.copyright = this.$ls.get(COPY_RIGHT);
    if (!this.webqq || !this.webtel) {
      this.$store.dispatch('GET_CONF').then(res => {
        this.webqq = res.data.webqq;
        this.webtel = res.data.webtel;
        this.copyright = res.data.copyright;
      });
    }
  },
  data() {
    return {
      page_footer_one,
      page_footer_two,
      page_footer_three,
      page_footer_four,
      page_footer_five,
      page_footer_six,
      webtel: "",
      webqq: ""
    };
  }
};
</script>
<style lang="less" scoped>
@import "~styles/index.less";
@import "~styles/variable.less";
.customer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  a {
    line-height: 22px;
    margin: 0 16px;
    color: @base-color;
  }
}
.footer {
  .padding(20, 0, 40, 0);
  .footer-img {
    .mt(20);
    text-align:center;
    padding:0 24px;
    img {
      .w(134);
      .h(47);
      margin-bottom:8px;
    }
  }
}
</style>
